<template>
  <div class="lsc-mycenter-order">
    <van-nav-bar title="我的订单"/>
    <van-tabs @click="onTabs"  :active="active">
      <van-tab v-for="(tabs, index) in tabTitle" :title="tabs.title + '(' + tabs.qty + ')'" :key="index" >
        <div class="lsc-mycenter-order-box" v-for="(item,ind) in orderList" :key="ind">
          <van-panel title="订单号" :desc="item.orderno" :status="'环节处理时长：' + item.handle_length">
            <van-row class="lsc-mycenter-order-info">
              <van-col offset="1" span="5">顾客：</van-col>
              <van-col span="18">{{item.agent_name}}</van-col>
              <van-col offset="1" span="5">提交日期：</van-col>
              <van-col span="18">{{item.createtime}}</van-col>
              <router-link :to="'/orderdetails?id='+item.id">
              <van-icon name="arrow" style="position:absolute; top: 15px; right: 15px;"/>
              </router-link>
            </van-row>
            <div class="lsc-order-list-box">
              <van-card
                :title="item.name"
                :desc="item.model_no"
                :num="item.qty"
                :thumb="item.img_url"
              >
              </van-card>
            </div>
          </van-panel>
        </div>
        <div 
          class="lsc-loading" 
          @click="loadMore(index)"
          v-if="pageinfo.total > orderList.length" >
          加载更多...
        </div>

        <div class="lsc-loading" v-if="isLoading">
          <div class="lsc-loading-mask"></div>
          <van-loading color="black" />
        </div>

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'

export default {
  name: 'orders',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading'
    })
  },
  data () {
    return {
      active: 0,
      tabTitle: [
        {
          id: 0,
          title: '今天',
          qty: 0
        },
        {
          id: 1,
          title: '近一周',
          qty: 0
        },
        {
          id: 2,
          title: '近一个月',
          qty: 0
        }
      ],
      orderList: [],
      pageinfo: {
        type: 0,
        pageindex: 1,
        pagesize: 10,
        total: 0
      }
    }
  },
  created() {
    this.getOrderTotal()
    setTimeout(()=>{
      this.getOrderList(0)
    },500)
  },
  methods: {
    getOrderTotal() {
      this.axios.get(api.qsSys.handleOrderTotal, {params: this.pageinfo})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.tabTitle[0].qty = res.data.data.same_day_total
            this.tabTitle[1].qty = res.data.data.nearly_week_total
            this.tabTitle[2].qty = res.data.data.nearly_month_total
          }
        })
    },
    onTabs(index, title) {
      this.orderList = []
      this.pageinfo.pageindex = 1
      this.pageinfo.total = 0
      this.getOrderList(index)
    },
    getOrderList(index) {
      this.pageinfo.type = index
      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.qsSys.handleOrders, {params: this.pageinfo})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            if(res.data.data!=null) {
              this.orderList = res.data.data ? this.orderList.concat(res.data.data) : []
              this.pageinfo.total = res.data.pageinfo.total 
            }
          }
        })
    },
    loadMore(index) {
      this.pageinfo.pageindex += 1
      this.getOrderList(index)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.lsc-mycenter-order-box {
  margin-top: 5px;
  margin-bottom: 10px;
}
.lsc-mycenter-order-info {
  position: relative;
  margin: 10px 0;
}

.lsc-mycenter-order-info>div {
  padding-bottom: 5px;
}
.lsc-mycenter-order .van-card__row {
  margin-top: 8px;
}
/* .lsc-mycenter-order-info {
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.lsc-mycenter-order-info-col {
  padding-bottom: 8px;
  font-size: 12px;
}
.lsc-mycenter-order-info-col:nth-child(4) {
  color: #f44;
}
.lsc-mycenter-order-info-col:last-child {
  padding-bottom: 0;
  color: #38f;
  text-align: right;
} */
</style>
